
<script setup>
import { ref, reactive } from 'vue'
import { addIndexApi ,getIndexInfoApi,editIndexApi} from "@/api/houseIndex.js"
import { useCommunityList } from "@/hooks/index.js"
import { ElInput, ElMessage } from 'element-plus'
import { gethouse } from "@/api/house.js";

//小区信息
const cateList = useCommunityList()
// ============================
// 子组件数据添加或修改后要给父亲
const emit = defineEmits(["updateList"])
// ==============================
// 表单数据
const defaultState = {
  id:null,
  building_code: "",// 栋数 CM-fea38988-9c77-4837-b5a9-464e08af74fa  
  community_code: '',// 小区  BD-9e0f7ae8-0d7a-416d-99df-0bff16263779
  desc: "",//描述
  enter_time: '',//时间
  floor: 0,//楼层
  name: "",//房产名
  owner_name: "",//户主名
  owner_tel: "",//手机号
  rooms: '',//房间数
  unit: 0,//单元
}

const formData = reactive({ ...defaultState });

// 验证规则
const formRules = {
  building_code: [{ required: true, message: "请输入", trigger: "change" }],
  community_code: [{ required: true, message: "请输入", trigger: "change" }],
  floor: [{ required: true, message: "请输入", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  owner_name: [{ required: true, message: "请输入", trigger: "blur" }],
  owner_tel: [{ required: true, message: "请输入", trigger: "blur" }],
  rooms: [{ required: true, message: "请输入", trigger: "blur" }],
  unit: [{ required: true, message: "请输入", trigger: "blur" }]
};

// 全部获取栋数
const buildingList = ref([])
const communityChange = async () => {
  formData.building_code = null
  const res = await gethouse(formData.community_code) //code='CM-8c63d562-199e-4dd2-b08c-55b271a00769'
  buildingList.value = res.data
}

//标题
const title = computed(()=>{
 return formData.id ? '修改':'新增'
})
//单元信息
const UnitChange = (value) => {
  formData.unit = value
}
//楼层信息
const FloorChange = (value) => {
  formData.floor = value
}

// 表单ref引用
const formRef = ref();
// 抽屉打开
const isShow = ref(false)
const closeHandler = () => {
  // 移除校验
  formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
};
// 表单提交
const onSubmit = async () => {
  try {
    // 1. 校验数据
    await formRef.value.validate();
    // 2. 整理数据
    // 3. 提交数据
    const data = toRaw(formData);
    formData.id?await editIndexApi(data): await addIndexApi(data)

    ElMessage.success("操作成功");
    // 5. 关闭
    isShow.value = false;
    // 6. 列表更新
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};
//关闭抽屉
const close = () => {
  isShow.value = false
  // 移除校验
  formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
}
// 数据回显
const replyData = async (id) => {
  let res = await getIndexInfoApi(id)
  Object.assign(formData, res.data)
  isShow.value = true
}

defineExpose({
  replyData,
  isShow
});

</script>

<template>
  <el-drawer :title="title" v-model="isShow" @close="closeHandler" size="50%">
    <template #title>
    </template>
    <template #default>
      <el-form :model="formData" label-position="top" :rules="formRules" ref="formRef" label-width="120px"
        :inline="false">
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属小区" prop="community_code">
              <el-select v-model="formData.community_code" size="large" @change="communityChange">
                <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="所属栋数" prop="building_code">
              <el-select v-model="formData.building_code" size="large">
                <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="房产名称" prop="name">
              <el-input size="large" v-model="formData.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="户主姓名" prop="owner_name">
              <el-input size="large" v-model="formData.owner_name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="联系方式" prop="owner_tel">
              <el-input size="large" v-model="formData.owner_tel" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="房间数" prop="rooms">
              <el-input size="large" v-model="formData.rooms" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="单元信息" prop="unit">
              <el-input-number v-model="formData.unit" controls-position="right" size="large" @change="UnitChange" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="楼层信息" prop="floor">
              <el-input-number v-model="formData.floor" controls-position="right" size="large" @change="FloorChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="入住时间" prop="enter_time">
              <el-date-picker type="date" v-model="formData.enter_time" size="large" format="YYYY/MM/DD" value-format="x"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="描述" prop="desc">
              <el-input v-model="formData.desc" size="large" type="textarea" :rows="4" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="close">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>

<style scoped>
::v-deep .el-form-item__content {
  display: block;
  margin-left: 20px;
}

::v-deep .ql-editor {
  height: 200px;
}
</style>